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This is a free guide. Please send it to 
anyone you think it could help. 

E-mail it. Facebook it. Tweet it. Enjoy it! 



I’m giving you this free, but I have to set some ground 
rules because there are some poor people with lawyers 
out there and I need to protect myself. 

1 . Don’t sell it (you can give it away for free, though) 

If someone charged you for this, try and get your money back. If that doesn't 
work, put a curse on them or something. Most major credit card companies 
now offer this. 



You are free to send it as it is, but don’t change the cover or any of the 
contents. 

3. Use at your own risk 

The advice contained in this guide was right when written, but the web is a 
fast changing environment where things that worked one day may not the 
next. Also, remember that the web is accessible in most countries, but there 
are different laws all over the place. You agree not to hunt me down if 
something bad happens to you. 
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Conditions of Use 



2. Don’t edit the file 
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4. Links in this guide will likely stop working over time 

Especially after the apocalypse in 2019. If something breaks, try Google. If 
they’ve gone broke by then, then try asking a human like back in ye olden 
days. 

5. Don’t blame other people/companies mentioned in this 
guide if something goes wrong 

I don’t work with or for the different services mentioned in this guide 
(although some of the links are affiliate links) and they haven’t approved any 
of the content of this guide. If there's a conflict between what I say, and 
what they say... they’re the ones to believe. 

6. There are no guarantees 

Everything is at your own risk. Use your own common sense, only spend what 
you can afford to lose. And don’t eat yellow snow. 



Got all that? Then let’s get started... 




Neil's Guide to Building Your Own 



r 



Why I Wrote This Guide 

I started designing websites back when it was hard. 

It would take months to get your site coded by hand, 
then hours to make basic changes once it was online. At 
most, you could only put a few small graphics on your 
pages - or else it would take too long to load. 

It used to cost you a fortune just to get your site online, 
and if you got anything more than a few hundred visitors 
a day your site would crash. 

Just in the last couple of years, there have been some big 
changes that have made it easy - embarrassingly easy - 
for people that have never learned anything about web 
design to build their own sites. 

And I’m not talking about basic sites, either. Some of the 
things you can do now are incredible, and would take a 
professional web designer weeks to program by hand. All 
you have to do is click a few buttons. 

I’m often asked by people to set up sites for them. When 
they explain what they want to do, I usually find that they 
could do it themselves with a little bit of guidance from 
me. 



That’s what this guide is for. It will teach you how to build 
your own website that will look exactly like you paid good 
money for someone else to build it for you. 
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I’ve come up with a simple system that anyone can copy 
to build a site in almost no time, for very little money. 

But, more than just saving you money, or making it (if you 
want to charge for your skills) you’ll have something that 
you will cherish. Web design is the ultimate way to unleash 
your creativity, and share it with the World. Even a pretty 
small webmaster can build sites that get more visitors than 
listeners to your local radio station. 

My advice is to get something up quickly, then build on it. 
Don’t wait for months thinking about it, or waiting until you 
have the perfect idea for how your site will be. This guide 
will teach you how to get your site up within an hour or 
two. In other words, you can do it today. 

Once you get started, you will become addicted to your 
site very quickly. Your head will be buzzing with ideas to 
expand it, and we’re going to be using a system that 
allows you to develop your site easily once your 
knowledge and confidence grows. 

Don’t get stressed out if you can’t do something. Try 
searching Google, as someone has probably had the 

Same problem before. (Note: I’ll mention Google a few times in this 
guide due to laziness - there are other search engines available, so you can 
substitute with Bing, Ask or Yahoo!) 

Most of all... have fun! 
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Why Having Your Own Website is so 
Great 



If you’ve read this far, you are already open to the 
possibility that being able to create websites might be 
useful. Here are some more things to motivate you... 



• It’s something extra to put on your CV/Resume. Web 
skills are now sought after in the job market. 

• People think that those that have their own websites 
are smarter (please DON’T correct them). 

• It’s fun. Unbelievably good fun. And rewarding too. 
The joy of seeing floods of visitors from all over the 
planet coming to see your own little creation is 
something that can’t be matched. 

• You can work at all hours of day or night, from 
anywhere on the planet. 

• You can design sites for other people... for money! 

• Your website is your own little world, which you can 
make your own and invite people into. 



• Although many people have a Facebook/Twitter 
account, these are limited in what you can do with 
them. With a website, you can make it any way you 
want. 
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What We Are Going To Do 

Let’s take a look at the main steps were are going to take 
to get up and running. 

Firstly, we’ve got to get you a hosting account. This is 
where your website files are stored, so people can access 
them from their own computers. We’ll see how you go 
about setting this up, and how to choose a domain 
name. It takes a few minutes, and is very easy to do. 

Next, we’ll install your website manager software. This will 
let you run your site without knowing any programming. 

Once your control panel is installed, we can then choose 
a theme. There are thousands to choose from - most are 
free, but you can pay if you want a really flashy one. 

We’ll create some pages, and add some text and 
images. 

We’ll also take a look at: adding things like YouTube 
videos and image galleries. Setting up an e-mail address 
for you - you can have as many as you want in the form: 
anything@yourwebsite.com. Visitor statistics, so we can see 
who is visiting your site. How you can get lots of visitors 
from the search engines. 
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1 . Getting a Domain & Hosting 



You’re going need a domain name - e.g. 
www.mywebsite.com - so people can enter that into their 
web browser to visit your site. 

You don’t "own” a domain name, as such - it’s more like 
renting one. You register it for a specific period of time (1 - 
1 0 years) but have the right to renew it indefinitely. If you 
don’t renew it, someone else can take control of it. 



You’ll also need somewhere to store (or "host”) your 
website, so people can access it. A web host is a 
company that provides you with a server, which is really 
just a computer that serves web pages. You’re going to 
manage your server through your web browser, and it’s all 
run through a control panel. 

Hosting packages come with a lot of features, but we’re 
just going to keep things simple by sticking to what we 
need. If you are adventurous, you’ll be free to explore the 
extent of your hosting package to see what it can do. 



Hosting packages come in all shapes and sizes, and there 
are people offering them for all price ranges. You don’t 
need to spend hundreds of pounds a month, since this 
level of service is designed for businesses. Equally, avoid 
very cheap packages (e.g. £12/$20 a year) since they 
can be unstable, and their promises of “unlimited space 
and bandwidth” prove to be untrue as soon as your site 
takes off - and they just shut your site down without 
warning because they can’t handle it. 
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For this course, we’re going to be using a hosting 
company called Hostqator . They are one of the largest, 
and have a good balance between features, cost & 
customer service. They are ideal for people starting out, 
while they can handle sites getting hundreds of thousands 
of visitors a day. 

There are two packages that are recommended... the 
Hatchling or Baby Package. The only difference between 
the two is that the Baby package allows you to run 
multiple websites on the same hosting account. If you are 
sure you only want to run one website (e.g. with one web 
address) then go for Hatchling. However, if you think you 
may want to set up other websites in future (including for 
friends, clients, groups, etc) then go for Baby. 

Normally, when you set up a hosting account, they’ll 
register a domain at the same time, and tie this to your 
hosting account. 



To set up your hosting account... 

1 . Visit the site from here: http://www.neilstoolbox.com/hostinq 

2. Click on the “Web Hosting" link at the top of the page 

3. Choose either Hatchling or Baby and use the drop down to 
select your payment terms. Obviously, the more you pay in 
advance the less you pay per month. 

4. Enter a domain name. This will be your web address, so 
choose carefully. 

5. Fill out your details on the next page, and click Create 
Account at the bottom. 

6. That's it! You'll be emailed your accounts details once it is set 
up. Usually, it just takes a few minutes. 
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2. Your Server Control Panel 



Once you’ve received your login details for your server, 
you can usually login by going to: 

http://wwwyourwebstfe.com/cpanel 



And then entering your username and password. 

You’ll then find yourself in 
the control panel (cPanel). 



Don’t worry about the 
amount of icons... you won’t 
be using most of them. 



Some of the ones you should take note of are... 




E-mail Accounts lets you set up POP accounts, so you can 
send and receive mail from anyffi/ng@yourwebsite.com 
through a program like Microsoft Outlook, Windows Mail, 
etc. 





Forwarders allow you to direct any mail sent to 
anyfh/ng@yourwebsite.com to an existing e-mail address. 
These are very simple to set up, and (unlike POP 
accounts) you don’t need to configure anything 
on your computer. 





You’ll probably also want to 
keep an eye on your visitor 
statistics/logs. You are given a 
number of packages to check 
these, but the recommended 
one is Awstats. 



Logs 






Summary 








Reported 
First visit 


Month Jun 2010 
01 Jun 2010 - 01:16 








Last visit 


24 Jun 2010 - 18:41 










Unique visitors Number of visits 




Hits 


Bandwidth 


Viewed traffic 


* 195 582 6106 61116 

(2.98 visits/visitor) (10.49 Pages/Visit) (105.01 Hits/Visit) 


450.16 MB 

(792.03 KB/Visit) 


Not viewed 
traffic * 




820 


2223 


15.51 MB 



* Not viewed traffic includes traffic generated by robots, worms, or replies with special HTTP status codes. 



Monthly history 




Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec 
2010 2010 2010 2010 2010 2010 2010 2010 2010 2010 2010 2010 



Month | visitors NU ™t r ° f Pages Hits Bandwidth 

Jan 2010 82 178 600 5179 28.09 MB 

Feb 2010 246 434 1475 13613 80.96 MB 

Mar 2010 179 504 2209 25204 162.66 MB 

Apr 2010 67 376 3518 60953 345.43 MB 

May 2010 333 722 2681 26032 354.64 MB 



As well as the actual number 
of people to your site, you’ll 
also get information like 
which pages they are 
visiting, what other websites 
are linking to yours and what 
search terms they entered 
into Google to find your site. 



An important thing to 

remember with web stats is that not all the visitors to your 
site are humans - a lot of visitors are actually other 
computers, so don’t get too excited too quickly! 





Domains 



Redirects 5 
Dl\ 



The last icons to pay attention 

to are Addon Domains (which 
let you run multiple websites 
on your same hosting 
account) Parked Domains 

(allows you to have multiple web addresses which take 
visitors to the same website, such as mywebsite.com and 
mywebsite.net) and Subdomains (such as 
music.mywebsite.com, news.mywebsite.com) 





r 



3. Setting Up Wordpress 



We’re going to be using a Content Management System 

(CMS) to run our site. This allows you to manage things like 
your site theme/template, as well as all the text and 
images on your pages, without having to write or 
understand any code. You manage it all online. 

Wordpress started as a blog (online diary) system but 
grew to become a full CMS. 

The advantages of Wordpress are: 



• It’s free. You just need your existing hosting account 

• It’s simple, and easy to use for beginners 

• You run it through a web browser, anywhere in the 
world 

• Takes seconds to add or update text and images. 

• There are thousands of themes available. Most are 
free, but there are premium ones out there if you 
want something special 

• Supports lots of “plugins" - meaning it’s a piece of 
cake to install photo galleries, videos, calendars. All 
easy to install 

• There’s a large support community out there if you 
get stuck 

There are two ways to install Wordpress through cPanel. 
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The first way is through Fantastico. This is a set of installer 
programs that lets you install all sorts of free software in j 
a few steps. 



Jl Lt± 



From the homepage of your cPanel, click 

on the Fantastico De Luxe icon. 



h-*t±l I 

MoJuIes 



Pa c ki 




You’ll then be taken to the 
Fanstastico page. 



Click on the Wordpress item on 
the left hand side menu. 



» * 



X 

Control Fantastico 
Panel 



Navigation 

Fantastico Home 
Control Panel Home 

Blogs 

b2evolution 







Classifieds 

Noahs Classifieds 



Fantastic* 

Use Fanta: 

thE I Eft. Inj 
databasES. 
MySQL dal 

Click on ar 

UPDATE N< 

Following ii 
secure and 
Fantastico 
now. 

Word Press 



On the next page, click on the New 
Installation link 



Word Press support forum 
fVfe nr.*- aggnr i with th E SUppO 

19.2) 

: 9.5G MB 

DiskspacE availablEi! 999812.5 MB 




Installation location 
Install on domain 

Install in directory 




Next, make sure your 
website is selected. If 
you have multiple 
(addon) domains set up 
on your hosting account, you would choose the site you 
want to use here. 

Leave Install in directory blank, so that Wordpress will run 
your whole site. 



i ® 
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Choose a username and 
password. Make your password 
difficult to guess, as anyone will be 
able to log in to your site and 
make changes if they find it out. 



Ad min access data 
Ad m i n i strato r- u s a m a m e (■ 
need this to Enter the 
protected admin area) 

Password (you nEEd this to 
enter the protected admin 
a rea j 




Finally, choose the details 
that will appear on your site. 
You will be able to change 
these later, but it’s a good 
idea to try and get them 
right first time. 




Hit the Install Wordpress button. It will run a check to see if 
anything is okay, then ask you to confirm your happy to 
install. 



Once Wordpress is installed, you can access your control 
panel by visiting www.yourwebstfe.com/wp-admin 
through any web browser. 



The alternative way to install is through Quicklnstall, which 
(at the time of writing) was in Beta testing. It’s designed to 
be a bit faster than Fantastico, so you may want to try this 
way if you have problems following the way outlined 
above. 




Website 



c : 



Cent 



From the cPanel, click on the Quicklnstall 
icon and follow the instruction from there 
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4. Using Wordpress 

Wordpress is easy to use, and it’s not difficult to learn how 
to do just about anything through your admin centre. 

To login in, go to: 

hffp.Y/www.yourwebs/Ye.com/wp-admin 

and enter the username and password you set when 
installing Wordpress. 

You’ll then see the main page of the Wordpress Manager. 
Before we get into details, there are a few terms 
Wordpress uses that you need to understand. 

Themes: These are the “look” of your site. It involves the 
template that surrounds your page content, including the 
banner at the top, as well as things like the default font 
and colour scheme your site uses. These are easy to 
change. 



Plugins: These are small programs that you can activate 
on your site to modify or add to the functions of 
wordpress. For example, you may want add an image 
gallery, or make your site more friendly to search engines. 
You might want to pull the headlines from a news site you 
like, and display them at the side of your site. Or what 
about a contact form, that e-mails you the results. There 
are thousands available. 
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Widgets: These are small blocks that are added to ' 
theme’s sidebars (the right/left column of your pag 
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You can use these to display your page names, a short 
profile of yourself, an image. Plugins often use Widgets to 
display their output. 

Users: While you may be the only one that is going to 
update your site, you can allow other people to help. 
Depending on how much you trust them, you can limit 
what they can do. You may want them just to add new 
pages, or you might want them to be able to make 
substantial changes - such as switching the themes. 

Okay, let’s get started configuring your site. I’m going to 
keep some of this short, as we want to get on with 
actually adding text and content as soon as possible. 



First Look of your Site 

Firstly, we’re going to take a look at your site as it is. To do 
this, click on your site title - at the very top left of the 
page. 

Tip: in most web browsers, if you press the scroll wheel on 
your mouse (as if it were a button) when hovering over a 
hyperlink, it will open in a new tab. Alternatively, right-click 
on the link and choose “open link in a new tab”. 



It’s a good idea to keep your site open in one tab, and 
your Wordpress control panel in another. When you make 
changes, flip to the other tab and hit F 5 to refresh the 
page and see the changes. 



re* 



Neil's Guide to Building Your Own Website 



r 



Upgrading to the Latest Version 

You should always keep your version of Wordpress up to 
date, as security and feature upgrades are added 
frequently. 

If a new version is out, there will be a line at the top of 
your control panel that says something like, “ WordPress 
3.0 is available! Please update now .” 

Click on the link, and follow the instructions. There is no 
need to make a backup the first time you run the 
upgrader (as you’ve not added anything to your site yet!) 

Note that this guide uses Version 3.0, so other versions may 
differ in how you do things from this point on. 

Site Address 

Look at the menu on the left hand side, and hover your 
mouse over “Settings.” A down-arrow will appear when 
you do this, so click on this to reveal the sub-menu. Click 

on “General”. 

Your website address will appear on two lines, but will be 
missing the “www”. e.g. http://mywebsite.com rather 
than http://www.mywebsite.com. Change this so that 
includes the www. at the start. 



You should also change to your local timezone. Scroll up 
to find your nearest city. 
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When you click the Save Changes at the bottom, you’ll 
have to log in again (since you changed the web 
address to include www). 

Privacy Settings 

By default, your website will not appear in Google, or any 
of the major search engines. 

To change this, go to $ettings>Privacy on the left-hand 
menu. 

Make sure that the first option is selected: “I would like my 
site to be visible to everyone...” 

Permalinks 

We also need to make sure our page URLs (the address in 
your browser bar) is human-readable. This is important for 
your search engine rankings. Wordpress calls these 
addresses “Permalinks” 

Go to Settings>Permalinks on the menu. Then select 

“Month and name” and save. 



Common settings 



O Default 
ODay and name 



C 



0Month and name 



ONumeric 
O Custom Structure 



D 



ht tp : //walkmydog . mcurl . inf o/?p=123 

ht tp : //walkmydog . mcurl . inf o/2 01 0/0 7/ 2 4/sample-post/ 
ht tp : //walkmydog . mcurl . inf o/2 01 0/0 7/sample-post/ 
http : //walkmydog . mcurl . info/archives/123 
/%year%/%monthnum%/%postname%/ 
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Disabling Comments 

By default, a comment box will appear beneath each of 
your pages. This isn’t relevant for us, so we’re going to 
take it out. 

To prevent this from appearing, go to Settings>Discussion. 

At the top of the page, make sure you untick “Allow 
people to post comments on new articles ” 



Note that this is the default setting - you’ll be able to add 
comment forms to individual pages on their respective 
edit forms. We’ll learn about editing pages later. 



Default article settings 




0 Attempt to notify any blogs linked to from the article. 

link notifications from other blogs (ping backs and trackbacks.) 



Alpw people to post comments on new articles 

ttm gs may be overridden for individual articles,) 




5. Choosing a Theme 

One of the best parts of Wordpress is the massive number 
of themes (templates) available. Most are free, while 
there are some excellent paid-for themes out there as 
well. They are all very easy to install. 

In addition to uploading new themes, Wordpress let’s you 
modify them from within the control panel. If you 
understand just a little bit of HTML and/or PHP, you can 
make changes to the look of your site. This is great if you 
want to get your website up and running without knowing 
any coding, but are interested in learning it over time. 
There are lots of tutorials online to help you do this. 

By default, the 
Wordpress theme 
your site will have 
when you first set up 
is called Twenty-Ten. 

This is a huge 
improvement on the 
old default theme 
(prior to version 3) 
which was very 
basic - and designed in the days when Wordpress was 
only used for Blogs. Twenty-Ten lets you make 
modifications to the banner at the top from within the 
control panel, and has a drop-down menu system at the 
top. Previously, you’d have to understand code to make 
these changes. 
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My Amazing Website 




Hello world! 

Posted on July 24. 2010 by Neil 

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! 

Posted in Uncateoorized 1 1 Comment | Edit 



[ Search | 



Recent Posts 

■ Hello world! 



Recent Comments 

■ Mr WordPress on Hello world! 



Archives 

■ July 2010 
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It’s a good idea to start with Twenty-Ten to learn the 
basics, but you’ll probably want to change theme at 
some point to make your site more unique. 



There are two ways to change theme. Firstly, the 
Wordpress control panel has its own database of 
hundreds of themes. You can search and install with a 
couple of clicks. 

Secondly, you can download themes from other 
independent sites (search “Wordpress Themes’’ in any 
search engine). They’ll give you a .zip file, which you then 
upload in your control panel and activate it. 

Once you’ve uploaded a theme, it’s kept on your server - 
even if it’s not the one you are actually using. So, you 
could have several themes - and change them once a 
month by selecting them from your list. 

For the purposes of this guide, we’re going to stick with 
the Twenty-Ten theme - which should already be 
enabled. However, let’s see how easy it is to change 
themes... 

Using the Wordpress Theme Database 



On the left-hand menu, hover over 

Appearance. Then, click Themes. 



H Appearance 



Themes 



Widgets 

Menus 




The themes section will then open. This will 
show your currently installed themes, and the 
one you have active just now. 



Background 

Fleader 



Editor 



Look at the top, and 
you should notice two 
tabs. Click on "Manage 
Themes” 









Twenty Ten 1.0 by the WordPress team 

The 2010 default theme for WordPress. 

All of this theme's files are located in /themes/ twenty te 



Enter a search term, and click the button. 




Manage 77 



wmes 



Install Themes 



Search | Search Results | Upload | Featured | Newest | Recently Updated 



Search fur t hemes by k eyword , author, or tag. 

Term v ^nnodem^J 



Search 



You’ll then get a snapshot of all the themes that match 
your term. 



W-irr li In- i'ik-i^i f r - ♦ flr Uy 

T#i-!\ v ni-:i:lHiri ^iwrrh 




P3 

(SlSikffl I ELEfAil' 

A, creLp Hag dicmctar short jpdatc manages. ospred 
by Twittur. Fidumg: rias-Elv- Ires peering rent 

pegs. ^nrtL-— h:r group blogging, or a:- a :iv«£4ngi theme. 
LipTi^nk odge- updrfrj Threaded mrwTwH or- the 

h :iiW ■i-Ii ih hiIi< i i.| Till ‘iiii-JI Hiid i i:iiiiiih-i!--i. I vm 

I h:j l . i :,| :j h i : i m Ii.hkhiI iir ri i-l r i,r-iHr I h i] h . f, 
S'lOw.-l’iile rflJCurullDr [Il kn£p rhiVgE CkJ f . 

Real Q-c noertKanano when a new eomref* er jpdatc n 
perrt-ed. Supw-hand*- tevtoo ard shertruts. Het-etics •'■cue 

h:i v- ■ i • Ih - i . (’■err! Liimmh. ftitfj mi:i h !• ■ unit'... 




AjtiI 

Jiiy ljl | F-'.-pviHijy 

A 2 ul a a dean ar^meeem ticrnc -rth a te?±iy, :orpo p ofcc 
hevi. This thama a m&afTtco b* ■fiSEyto ede and mecrh,. 
Now -ndudes 1 lc»ed oee-p- sLtriavigaber m tnc navgctian 
m«m.. Jurt o^ge tC rtf RJfle »n V-n ji 

Mill; H.l HI! U'lUJltf P-JL K ^idllllHIIII IWt I 1 1 r4 Tch-I M 

will Ef hj. “hr- I Ulinl iikI , i!I'i E-’ , |:IhIh h nlti: HMHr.-d-JH 
Tot Ii hh Jt MWtf.EWEdV0pv2ldiGHTI. RMWi TC- Old b.A 
whatever you want. 



1 






Simate.. rrederr, litfoveigtr: 

De'oaia 









You can either click on “Preview” beneath the snapshot 
to see a full-screen version of the theme, or you can install 
it straight away. A pop-up window will open - just click the 
Install button at the bottom. 




This will download and install the theme on your server, 
ready to use. Remember that you still have to “active” the 
theme to make it the one your site uses. 
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Using External Themes 



You can also upload your own themes that you can get 
from other sites. They should provide you with the .zip file, 
which you should download to your hard drive. 

Click on Appearance>Themes on the left-hand menu 
again, then choose the Manage Themes tab at the top 
again. 



Upload the file from your 

hard drive on the next page, then remember to active it 
once it installed on your server. 

Remember that not all themes work across all versions of 
Wordpress - older themes may not work on version 3, and 
newer themes may take advantage of the latest features 
that will break your site on earlier versions. 

Also, one other thing to point out with in using "free” 
themes from other sites is that they will often contain links 
to other websites that you cannot remove in sidebar and 
bottom (copyright) section of your pages. 



We’re going to stick with Twenty-Ten. So, if you have 
changed themes, go back to Appearance>Themes and 
"Activate” Twenty-Ten again. 



Now, click on "Upload” at 
the top. 




Featured | Newest | Recently Updated 



Install Themes 



Search for themes by keyword author, or tag. 




6. Plugins & Widgets 



We’re going to install some plugins to make our website 
more powerful. 



We’re going to start by making the 

Wordpress control panel a little easier to 

use. Remember that Wordpress was set up as a blogging 

platform, so more prominence is given to “posts." We 

want to use “pages” to build our site, so need to make a 

change. 




To install plugins, go to Plugins>Add New 
on the side menu. 



0 Plugins 



Plugins 







'3 Install Plugins 



Search | Upload | Featured | Popular | Newest | Recently Updated 



Plugins extend and expand the functionality of WordPress. You may automatically 
plugins from the WordPress Plugin Directory or upload a plugin in .zip format via t 



Search for “WP CMS" 



Search 

£ yword, author, or tog. 




Search Plugins 



Popular tags 

You may also browse based on the most popular tags in the Plugin Directory: 



Search | Search Results | Upload | Featured | Popular | Newt 



A set of results will be 
returned. Click “Install Now" 
on the first result. Then 
“Activate Plugin” 



Term v wp cms 



Search Plugins 



Name 



Version 



WP-CMJ 




Details 



| Install Now 



the Wordpre 
The blog fur 
pages to m a 
you and yoL 



You should now notice 

some changes to the side menu. 



WP-CMS Post 



2 - 22 ★★★★Y? Post Contro1 



complete co 




r 



For one, “Pages” is now at the top of the list - rather than 
“Posts”. 

The next plugin is the “All in One SEO Pack” This configures 
your site for the search engines, and means you don’t 
need to understand much about them to rank highly. 

Install the plugin, as you did above. Notice, though, that 
the menu has changed - Plugins now appear under 

Settings. 

Once installed, you should notice that a red bar appears 
at the top of the page once you’ve done this. 




Plugins 



Add New 



Screen Options Help 




Click on “the admin page” link in this red box. This will then 
allow you to configure the plugin. 



The only thing to do is make sure it is “enabled” then fill 
out the next three boxes. 



The “Home Title” section is what will appear in big blue 
writing above your Google listing, so make attractive. It 
will also appear on the tab in your visitors’ web browsers. 



Be careful to keep your description and keywords 
relevant to your site topic. Using misleading words to get 
more hits is liable to backfire. 
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Plugin Status: c $> Enabled 

(j^saolea 

Home Title: C Website | All about Me! 



Home Description: / This should be a short human-readable description of your site 



Home Keywords (commJ Put, Keywords, In, Here, Relevant, To, Your Topic 
s e p a ra te d ) 



Scroll down to the bottom and click on the “Update 
Options” button to save them. 



Now, let’s add some widgets. 

Widgets appear at the side of your page. Go to 
Appearance>Widgets on the left-hand menu. 

To modify your widgets, you need to click and hold on 
them, then drag them to and from the box on the right. 
Anything here will appear on your site. 




ItO Widgets 




D rstg wttjgptrr fawn faur fip a jadntoj r flirt Thv n$ht In .jct.'vjte Ifium. 4>rfl{r wnitigK'teT IwrJc ho 
in dtuvivAitv this ti jnd c^'msCo fhe/r sctttrgs. 





fi- liii; ur fl-’apdmn of utleyor-fis 



Use thus ho duel Lcj add era o\ yaw 
CLitcT monus as d «\ d(=t. 



Leg 1 ,'GJt. admin, reac sic WordPrEss 



Cdti^wics 





We’re going to take off most of 
options are set up for blogs). 

Drag the items in the “Primary 
Widget Area” pane across to 

the “Available Widgets” area 
to clear them. Leave the 
Search one, though. 



these (since the default 



Primary Widget Area 


1 

T 


The primary widget area 

Search 





Next, drag the “Text” 
widget into the Primary 
Widget Area. 

Click the down arrow 
to reveal the options 
for the widget. 





1 Primary Widget Area 


V 


r widgets heck here 


The primary widget area 






Search 




□Stfi 







Text 

Title: 

ol About Me 



Enter some a title and 
some text here. 



This is my site. I was born in 2009 and, after an 
unexpectedly fast growth rate, reached adulthood 10 
months later .1 




All about me! 



If you check 
your site, you’ll 
notice the 
difference. 



Click the Save 
below to 
apply the 
changes. 



button 

My Amazing Website 



Hello world! 



Posted on July 24. 2010 by Neil 

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! 

Posted in Uncateoorized 1 1 Comment | Edjt 



About Me 

This is my site. I was born in 2009 
and, after an unexpectedly fast 
growth rate, reached adulthood 
10 months later. 










7. Images and Graphics 



The web would be a pretty dull place if it weren’t for all 
the graphics. But you need to be careful when adding 
images to your site - use someone else’s image without 
permission, and you could find your website shut down... 
or worse (the owner’s lawyer may get in touch and ‘‘offer" 
not to sue you... if you pay £1 ,000+ for the rights). 

So, do not just go to Google Images, save any photos you 
like the look of and upload them to your site. That’ll land 
you in trouble. 



There are three main ways to get images for your site 
legally: 



1 ) Create them yourself. Got a digital camera? That’s 
all you really need. 

2) Find free images online. Search for ‘‘public domain 
images" These are images where the copyright 
doesn’t apply - either because the creator has 
volunteered to make them free, or because the 
copyright has expired. 

3) Buy images from other people. You 
can either buy royalty free stock 
images (you pay a single fee to 
download, but can then use it 




* •> 
* 

however you like) or you pay a licence 
fee (e.g. 1 p every time it is shown. 

Royalty Free is easiest way to go to get access to 
millions of high quality photos in a simple way. 



re* 
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Don’t be put off at the idea of spending money - royalty 
free images cost a few pounds/dollars at most, but give 
you access to professional photos that would cost 
hundreds for you to commission yourself. With just a few 
stock photos, you can make your site look like it costs 
thousands to develop. 

Here are some places to find images (Double check the 
rights they offer before using them): 

Free (Public Domain) 

• http://search.creativecommons.org 

• http://en.wikipedia.org/wiki/Public domain image resources 



Paid (Royalty Free) 

• http://www.istockphoto.com 

• http://www.biostockphoto.com 



Once you’ve got the images, you may want to 
manipulate them before adding them to your site. 
Remember that photos from a typical digital camera are 
huge (4000+ pixels across) whereas the typical web page 
is still only around 1000 pixels in width. 

You don’t need expensive software like photoshop to edit 
your pictures. The Gimp ( http://www.aimo.ora ) does a lot 
of what photoshop can, and it’s free. You can even edit 
them through a web browser, using sites such as Pixlr 
( http://www.pixlr.com ) . 
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File .Edit Image Layer Adjustment Filter View Language Help 



n 



This toot has no additional options 




Pixlr.com Image Editor 



Make sure you save your images as .jpg files. Alternatively, 
.gifs are good for basic graphics, such as logos, and .pngs 
are now coming more into use. 



Let’s look at changing your banner image. With the 
Twenty-Ten theme, you’re given an easy way to change 
this. 



Go to Appearance>Header. 




Make sure you have an image that’s cleared for 
copyright on your hard drive. 






r 






Choose the file from your 
computer, and click the 
Upload button. 



You can upload a custom header image to be sh 
the next screen you will be able to crop the ima 
Images of exactly 940 x 198 pixels will be use 






Choose an image from your com 
|v1y Documentk''.ntb.jpg | Bi 



\ 

mpuier: 

I Upload 



If your picture is not the right dimensions, you’ll have the 
option to crop it on the next page. 



Once it’s applied, check your site to see the difference. 



My Amazing Website AR about me! 




Hello world! 



[ Search | 



Posted on JuIy 24. 2010 by Neil 



About Me 

Ttiic ic mr cita T u'sc hnm in oru-kr* 



You’ll also have the option of adding a background 
image - this will be tiled, so try not to make it too 
distracting or your site will end up looking like one of those 
awful myspace pages. 

We’ll learn how to add images to individual pages in the 
next section. 
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8. Adding Pages & Content 



We’ve got our site set up. Now we need to put something 
on it. As a general rule, the more text you have on your 
site, the more visitors you are going to get from the search 
engines. 

What you add to your site is all down to what it is about. 
The process of adding pages is very simple, though. 

Go to Pages>Add New. 

The only things that you must fill out are the title and the 
contents of the page. You click Publish to make it live on 
your site. 



L Add New Page 

d ) 



Screen Options Help 



Publish 

Save Draft Preview 



Upload/Insert 0 H J3 O Visual HTML 




Word count: 0 



Status: Draft Edit 
Visibility: Public Edit 
O Publish immediately Edit 



Move to Trash 




Page Attributes 

Parent 

(no parent) v 

Template 

Default Template v 

Order 



Adding images to your pages 
is easy in Wordpress. Just click 
the icon above the page 
editor toolbar. 



Upload/Insert | [■] 
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A window will pop up allowing you to upload an image 
from your computer or use an existing image you’ve 
already uploaded. 



You have to choose one of your pages to be your home 
page. 

Go to $ettings>Reading. Make sure Static Page is 

selected, then choose the page you want to appear on 
your home page from the drop-down list. Click the Save 
button at the bottom to apply. 



1? Reading Settings 



Front page displays 



G 



I In sl'.la •h". Vn i ir l^'|-po+~ nnc 



® A static page (select below) 
Front pagef About 






Posts page: Unable to show posts when Blog mode is disabled. 



Menus 



Now, let’s set up our main menu at the top of our pages. 

Go to Appearance>Menus at the side. 




Menu Namel Main Menu| 


i 


V J 






Enter menu name here | 


To create a custom menu, give it a name above and click Create Menu. Then choose items like 
pages, categories or custom links from the left column to add to this menu. 



r 



Create a new menu called “Main Menu” 



Select the pages you want 
to appear on the menu, 
then click Add to Menu. 

The pages will now be listed 
on the right-hand side. 



You can now drag the 
items to sort the order. If 
you indent them they will 
become a sub-menu of 
the item they are below, 
e.g. when you hover your 
mouse over the menu 
item, a drop-down will 
appear. 



Pages 

Most Recent View All Search 

[7] Birds 
[7] Cats 
0 Dogs 



0 My Animals 
0 About 




About PAGE 



My Ait' 

Birds 



PAGE 



Cats PAGE 

Dogs PAGE 



Now, when you visit your 
site, you should find the 
menu in place. 



i 



About 


My Animals 




Birds HBB9H 


Hello 


Cats ■■1 


Posted c 


Dogs 
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9. Final Thoughts & Ideas 

Believe it or not, that’s it. This is all you need to know to get 
your own website up and running. 

Of course, this is really only the beginning. There are 
infinite directions to take your site, and there are many 
things you can do to add to your site. 

A few things that we haven’t really gotten into... 

Linking 

You need to get other websites to link to yours. This is one 
of the main keys in getting high search engine rankings. 
You can do this by commenting on other people’s 
websites, with a (respectful) link back to your own. 



You don’t need to submit your site manually to the major 
search engines for them to include you. They prefer to 
find sites themselves, and do this by using links. Hence, 
one of the reasons you want to make sure other sites are 
linking to yours. 

Embedding Tools From Other Sites 

Other websites often provide you with small tools that you 
can embed in your own site. They’ll usually give you some 
code to copy into your page. 
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To use this kind of feature, you’ll need to edit the raw 
HTML of your pages. 



When editing your page contents, put a placeholder 
when you want the item to appear. Something you’ll be 
able to spot in the code, such as row of t’s: tttttttt. 



Upload/Insert El HI Jl O 



B I A£€ 



E |= 



== 




□ 




T 


a 


sr.:: 



This is the content of my page. 



Visual 





And this is more content. 



Then, click on the HTML tab. Find the placeholder, and 
replace this by pasting the code the other site gave you. 
Then, click on the Visual Tab to return to the normal editor 
window. 



Upload/Insert H H J3 O Visual HTML 

b /' link b-quote del ins img ul ol li code more lookup close tags 
<strongxem>This is the content of my page.</emx/strong> 




And this is more <a href="http://www. google. com">content</a>. 



Upload/Insert H H J3 O Visual HTML 

b / link b-quote del ins img ul ol li code more lookup dose tags 
<strongxem>This is the content of my page.</emx/strong> 



aram name="movie" value="http://www. youtube 



'v/zSgiXGELibc&hl 



alue="true n ></param><param name= n allowscriptaccess" value="always n ><yparam' 



outube.com/v/zSgiXGELibc&ampjhl 



lication/x- shockwave- flash allowscriptaccess= alw 









And this is more <a href="http://www. google. com">content</a>. 



This is a simple way to add things like YouTube videos to 
your pages, without actually understanding the code. 

Building More than One Site 





Once you’ve got your first site up, you may want to add 
another to your server. If you set up Hostaator ’s baby 
package, all you need to do is to buy an additional 
domain from domain registrars such as Namechea 









or Godaddy. When going through the registration 
process, you need to make sure you set the Nameservers 
(sometimes called DNS settings) to those of your server. 



Nameservers look like this: ns331 .hostgator.com. You’ll 
have two, and the second one will be one higher than 
the first one (e.g. ns332.hostgator.com) . 



This information will have been sent 
to your in your welcome e-mail 
from hostgator, but is also on your 
cPanel’s left-hand column. 



WiW.W' H IT* 1 1 w 11 


Package 


Baby Croc 


IP Address 


174 . 120.236.202 


Server Name 


gator 1241 



Name Servers 

n s22 3 1 . h o s t g ato r. co m 
ns2232.hostgator.com 



Once your domain is registered (it takes a few minutes to 
become active) click on the Addon Domains icon in 
cPanel. 



You only need to 
enter the 
domain name 
( without the 
www) and the 
passwords - the 
rest will autofill. 



Create an Add-on Domain 






New Domain Nam el mywebsite.com 
Subdomain/Ftp Username: mywebsite 

Document Root: (9 
Password 

Password (Again) 

Strength (why?) 






public_html/mywebsite.com 

\ = 



Strong (69/100) 



Password Gene 



When you go to Fantastico to install Wordpress, you 
should notice your new domain in the drop-down menu. 



I’ll now pass it over to you. If you’ve come this far, well 
done - most people give up too easily, and never get to 
experience the benefits you’ll now enjoy as a webmaster. 



Good luck with your own projects 
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